<template>
	<view class="p-4">
		<view class="bg-blue vh-10 w-100 rounded-3 flex flex-row flex-x-space-between flex-y-center p-4 mb-4">
			<view class="text-white h8" v-if='USERINFO'>剩余积分:{{USERINFO.points}}</view>
			<view>
				<button size='mini' class='text-blue' @click="$page.open('/pages/video/index')">立即使用</button>
			</view>
		</view>

		<view class="bg-white p-6 box-shadow rounded-2">
			<view class="flex flex-row flex-wrap ">
				<view :class='item.id==id?"b-2":"b-1"' class="pack-box b-1 rounded-3 p-3  mb-4 mr-3"
					v-for="(item,index) in packageList" :key='index' @click="id=item.id">
					<!-- <view  class="subscript rounded-2 text-white">{{item.points}}天</view> -->
					<!-- <view v-else class="subscript rounded-2 text-white">{{item.points}}天</view> -->
					<view class="mb-2">{{item.name}}</view>
					<view class="point mb-2">{{item.points}}积分</view>
					<view class="price mb-2">￥{{item.money}}</view>
				</view>
			</view>
			<view class="bg-blue btn p-3 text-white" @click="createOrder">立即支付</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import { onLoad } from "@dcloudio/uni-app";
	import { $http,$page } from '@/utils'
	import { useUserStore, useRefs } from "@/stores";
	const userStore = useUserStore()
	const { USERINFO } = useRefs(userStore);
	const id = ref(0)
	const packageList = ref()
	onLoad(() => {
		getPack()
	})
	//获取套餐列表
	const getPack = (() => {
		$http.get('Package/getList').then(res => {
			packageList.value = res.data
			id.value = res.data[0]['id']
		})
	})
	//创建支付订单
	const createOrder = (() => {
		console.log(id.value)
		uni.showLoading({
			title:'支付中...'
		})
		$http.post('Order/createOrder', { data: { id: id.value } }).then(res => {
			let data = res.data
			wx.requestPayment({
				"appId": data.appId,
				"timeStamp": data.timeStamp,
				"nonceStr": data.nonceStr,
				"package": data.package,
				"signType": "MD5",
				"paySign": data.paySign,
				success(res : any) {
					uni.showToast({
						title:'支付成功'
					})
					uni.hideLoading()
					 uni.navigateBack()
				},
				fail(error) {
					uni.hideLoading()
					uni.showModal({
						title: '温馨提示',
						content: '用户取消支付'
					})
				}
			})
		})
	})
</script>

<style lang="scss">
	page{
	background-color: #fff;
	}
	.bg-blue {
		background-color: #306ff9;
	}

	.text-blue {
		color: #306ff9;
	}

	.btn {
		text-align: center;
		border-radius: 36rpx;
	}

	.b-1 {
		border: 2rpx solid #ececec;
	}

	.b-2 {
		border: 2rpx solid #306ff9;
	}

	.pack-box {
		text-align: center;
		position: static;


		.price {
			color: red;
			font-weight: 600;
		}

		.point {
			color: #306ff9;
			font-size: 24rpx;
		}

		.tip {
			color: #909090;
			font-size: 24rpx;
		}
	}
</style>